<template>
	<view id="appbw">
		<!-- 商家入驻图文 -->
		<view v-if="type == 1">
			<!-- 图文信息 -->
			<view class="imgTxt pt50 plr30 c666 f30 lh50">
				<rich-text :nodes="config.in_content"></rich-text>
			</view>

			<!-- 填充 -->
			<view class="fill"></view>

			<!-- 填写入驻信息按钮 -->
			<view class="footer tac c333 f34 bfef7cc" @click="type = 10">商家入驻</view>
		</view>

		<!-- 填写表单 -->
		<view class="edit" v-if="type == 10">
			<view class="form mt30 mlr30 f28">

				<!-- logo -->
				<view class="rows list ais ptb30">
					<view class="col w200 c666">商家logo</view>
					<view class="col f1 c333">
						<view class="image proImg" @click="upLogo">
							<image :src="wrap.shop_logo ? wrap.shop_logo : '/static/2877.png'" mode="aspectFill">
							</image>
						</view>
					</view>
				</view>

				<!-- 商家名称 -->
				<view class="rows list ais ptb30">
					<view class="col w200 c666">商家名称</view>
					<view class="col f1 c333">
						<input type="text" v-model="wrap.shop_name" placeholder="请输入名称" placeholder-class="pls" />
					</view>
				</view>

				<!-- 商家地址 -->
				<view class="list">
					<view class="rows ais ptb30">
						<view class="col w200 c666">商家地址</view>
						<picker mode="region" @change="selRegion" class="f1">
							<view class="rows col df c333">
								<view class="f1">
									<text class="pls" v-if="!wrap.shop_area">请选择省市地</text>
									<text v-if="wrap.shop_area">{{wrap.shop_area}}</text>
								</view>
								<uni-icons type="arrowright" color="#999"></uni-icons>
							</view>
						</picker>
					</view>
					<view class="rows ptb30" @click="selSite">
						<view class="col w200 c666"></view>
						<view class="col rows f1 c333">
							<view class="f1">
								<text class="pls" v-if="!wrap.shop_address">请选择地址</text>
								<text v-if="wrap.shop_address">{{wrap.shop_address}}</text>
							</view>
							<uni-icons type="arrowright" color="#999"></uni-icons>
						</view>
					</view>
				</view>

				<!-- 商家介绍 -->
				<view class="rows list ais ptb30">
					<view class="col w200 c666">商家介绍</view>
					<view class="col rows f1 c333">
						<textarea class="shopDetail textplus" maxlength="-1" v-model="wrap.shop_desc"
							placeholder="请输入文字介绍" placeholder-class="pls" />
					</view>
				</view>

				<!-- 商家资质 -->
				<view class="rows list ais ptb30">
					<view class="col w200 c666">商家资质</view>
					<view class="col df f1 fww c333">
						<view class="upImg image" @click="upImg">
							<image src='/static/2877.png' mode="aspectFill" />
						</view>
						<view class="image proImg pr" v-for="(item,index) in wrap.shop_images" :key="index">
							<image :src="item" mode="aspectFill"></image>
							<view class="icon pa r0" @click="delImg(index)">
								<uni-icons type="clear" color="#EB5A43" size="15"></uni-icons>
							</view>
						</view>
					</view>
				</view>

				<!-- 商家法人姓名 -->
				<view class="rows list ais ptb30">
					<view class="col w200 c666">商家法人姓名</view>
					<view class="col rows f1 c333 f30">
						<input type="text" v-model="wrap.shop_frname" placeholder="请输入商家法人姓名" placeholder-class="pls" />
					</view>
				</view>

				<!-- 法人电话 -->
				<view class="rows list ais ptb30">
					<view class="col w200 c666">法人电话</view>
					<view class="col rows f1 c333">
						<input type="text" v-model="wrap.shop_mobile" placeholder="请输入法人电话" placeholder-class="pls" />
					</view>
				</view>

				<!-- 法人身份证 -->
				<view class="rows list ais ptb30">
					<view class="col w200 c666">法人身份证</view>
					<view class="col rows f1 c333">
						<input type="text" v-model="wrap.shop_idcard" placeholder="请输入法人身份证" placeholder-class="pls" />
					</view>
				</view>

				<!-- 商家客服电话 -->
				<view class="rows list ais ptb30">
					<view class="col w200 c666">商家客服电话</view>
					<view class="col rows f1 c333">
						<input type="text" v-model="wrap.shop_kfmobile" placeholder="请输入商家客服电话"
							placeholder-class="pls" />
					</view>
				</view>

				<!-- 填充 -->
				<view class="fill"></view>

				<!-- 底部按钮 -->
				<cover-view class="footer tac bfef7cc f34 b" @click="submit">
					<cover-view v-if="wrap.shop_status == 3">保存</cover-view>
					<cover-view v-else>入驻</cover-view>
				</cover-view>

			</view>
		</view>

		<!-- 结果 -->
		<view class="result df dfc aic mt10p" v-if="type == 2 || type == 4 || type == 3">
			<!-- 图 -->
			<view class="img wh160">
				<image src="/static/success.png" mode="aspectFit" v-if="type != 4"></image>
				<image src="/static/file.png" mode="aspectFit" v-else></image>
			</view>

			<!-- 内容 -->
			<view class="txt mt60 tac c333 f34 fwb" v-if="type == 2">
				<view class="txt">商家入驻申请提交成功</view>
				<view class="mt30">请耐心等待后台审核</view>
			</view>

			<!-- 内容 -->
			<view class="txt mt60 tac c333 f34" v-if="type == 3">
				<view class="txt">恭喜您，入驻资料审核通过</view>
				<view class="mt30 c666 f30">请缴纳VIP入驻费{{config.vip_price ? config.vip_price : '...'}}元，然后使用商家权益</view>
			</view>

			<!-- 内容 -->
			<view class="txt mt60 tac c333 f34" v-if="type == 4">
				<view class="txt">入驻资料审核未通过</view>
				<view class="mt30 c666 f30">原因：{{wrap.shop_reason}}</view>
			</view>

			<!-- 操作框 -->
			<view class="fnArea df aic mt70">
				<navigator hover-class="none" delta="1" open-type="navigateBack" class="btn pay w250" v-if="type == 2">
					我知道了</navigator>
				<view class="btn pay w250" v-if="type == 3" @click="pay">缴纳</view>
				<view class="btn pay w250" v-if="type == 4" @click="type = 10">修改入驻信息</view>
			</view>
		</view>

	</view>
</template>
<script>
	// 定义全局变量that
	var that;
	export default {
		// 页面变量
		data() {
			return {
				// 状态 1图文介绍 2待审核 3已通过 4已驳回 10填写表单
				type: 10,
				// 内容
				wrap: {
					images: [],
				},
				// 系统配置
				config: {},
				pays:false
			}
		},

		// 页面加载完成后
		onLoad(e) {
			that = this;

			// 判断有无状态
			e.type ? (that.type = e.type) : '';

			// 获取信息
			that.getinfo();

			// 赋值内容信息
			that.config = uni.getStorageSync('config');
		},
		onShow() {
			
		},

		// 方法集
		methods: {
			// 获取信息
			getinfo() {
				// 获取用户信息
				that.util.getuserinfo((rs) => {
					// 重新赋值刷新页面
					that.wrap = rs.data.userinfo;
				});
			},

			// 提交
			submit() {
				// 验证必填项
				if (!that.wrap.shop_logo) {
					// 弹窗提示
					that.alert('请上传logo');
					return;
				} else if (!that.wrap.shop_name) {
					// 弹窗提示
					that.alert('请填写商家名称');
					return;
				} else if (!that.wrap.shop_area || !that.wrap.shop_address) {
					// 弹窗提示
					that.alert('请选择商家地址');
					return;
				} else if (!that.wrap.shop_desc) {
					// 弹窗提示
					that.alert('请填写商家介绍');
					return;
				} else if (!that.wrap.shop_images) {
					// 弹窗提示
					that.alert('请上传商家资质');
					return;
				} else if (!that.wrap.shop_frname) {
					// 弹窗提示
					that.alert('请填写商家法人姓名');
					return;
				} else if (!that.wrap.shop_mobile) {
					// 弹窗提示
					that.alert('请填写商家法人电话');
					return;
				} else if (!that.wrap.shop_idcard) {
					// 弹窗提示
					that.alert('请填写商家法人身份证');
					return;
				} else if (!that.wrap.shop_kfmobile) {
					// 弹窗提示
					that.alert('请填写商家客服电话');
					return;
				}

				that.openMsg()
				if(that.pays){
					// 请求接口
					that.request({
						url: '/api/user/in',
						data: that.wrap,
						load: 1,
						success(rs) {
							if (rs.code == 1) {
								// 更改状态
								that.type = 2;
							} else {
								that.alert(rs.msg);
							}
						}
					})
				}
				
			},
			openMsg() {
				wx.requestSubscribeMessage({ // 调起消息订阅界面
					tmplIds: [
						'NQYzRDkL6xQlAwPRcUwlVxUTt2V0I4BASZilHhsIWZ4'
					],
					success(res) {
						console.log('订阅消息 成功 ');
						console.log(res);
						that.pays=true
					},
					fail(er) {
						console.log("订阅消息 失败 ");
						console.log(er);
						that.pays=true
					}
				})
			},
			// 交钱
			pay() {
				// 支付按钮
				that.util.payment({
					url: "/api/index/payVipOrder",
					data: {
						platform: "wechatMini2"
					},
					success() {
						// 弹窗提示
						that.alert('支付成功');
						// 半秒后执行
						setTimeout(() => {
							// 支付成功后关闭跳转
						
							uni.redirectTo({
								url: '/pages/my/shop/center',
							});
						}, 500);
					}
				})
			},

			// 选择省市地
			selRegion(e) {
				// 赋值省市地
				that.wrap.shop_area = e.detail.value.join('');
				// 重新赋值刷新页面
				that.wrap = Object.assign({}, that.wrap);
			},

			// 选择地址
			selSite() {
				// 地图选点
				that.util.chooseLocation((rs) => {

					// 赋值地区
					that.wrap.shop_address = rs.name;
					that.wrap.shop_location = rs.latitude + "," + rs.longitude;

					// 重新赋值刷新页面
					that.wrap = Object.assign({}, that.wrap);
				})
			},

			// 上传logo
			upLogo() {
				// 上传图片
				that.util.img('shop_logo', 1, that.wrap);
			},

			// 上传图片
			upImg() {
				// 上传图片
				that.util.img('shop_images', 2, that.wrap, 2);
			},

			// 删除图片
			delImg(index) {
				// 弹窗提示
				that.alert({
					value: '确认删除图片？',
					success(rs) {
						// 判断时间
						if (rs.confirm) {
							// 删除图片
							that.wrap.shop_images.splice(index, 1);
						}
					},
				});
			},
		},
	};
</script>
<style>
</style>
